<script setup lang="ts">
import PlayVue from '@/components/icon/Play.vue';
import ArrowVue from '@/components/icon/Arrow.vue';
defineProps({
  item: {
    type: Object,
    default: () => ({}) // as Record<string, any>
  },
})
</script>

<template>
  <router-link class="film-item" :to="item.url">
    <div class="img-wrap">
      <div class="img">
        <img :src="item.cover_url" :alt="item.title">
      </div>
      <template v-if="item.type === '0'">
        <div class="mask"></div>
        <div class="icon">
          <PlayVue color="#fff"></PlayVue>
        </div>
      </template>
    </div>
    <div class="info">
      <div class="title text-main font-m line-1">{{ item.title }}</div>
      <div class="desc text-body font-sm line-1">{{ item.introduce }}</div>
    </div>
    <div class="arrow-wrap">
      <ArrowVue color="#9195A3"></ArrowVue>
    </div>
  </router-link>
</template>

<style lang="scss" scoped>
.film-item {
  position: relative;
  width: 466px;
  margin-bottom: 10px;
  cursor: pointer;

  &:not(:nth-child(3n)) {
    margin-right: 21px;
  }

  .img-wrap {
    position: relative;
    overflow: hidden;
    width: 466px;
    height: 262px;
    border: 2px solid #000000;
    box-shadow: 0px 9px 22px 2px rgba(98, 102, 117, 0.35);
    border-radius: 12px;

    .img {
      position: relative;
      transition: all 0.6s;
      width: 100%;
      height: 100%;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

    .mask {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0);
      transition: all .36s ease;
    }

    .icon {
      position: absolute;
      top: -30%;
      left: 50%;
      transition: all .6s ease;
      transform: translate(-50%, -50%);
    }
  }

  .info {
    padding-top: 20px;
    padding-bottom: 20px;
    padding-right: 60px;
    line-height: 22px;
    transition: all 0.6s ease 0s
  }

  .arrow-wrap {
    width: 32px;
    height: 32px;
    transition: all 0.6s ease 0s;
    position: absolute;
    bottom: 34px;
    right: 0px;
    opacity: 0;
    left: auto;
    overflow: hidden;
  }

  &:hover {
    .img-wrap {
      .img {
        transform: scale(1.2, 1.2);
      }

      .mask {
        background-color: rgba(0, 0, 0, 0.47);
      }

      .icon {
        top: 50%;
      }
    }

    .info {
      padding-left: 10px;
    }

    .arrow-wrap {
      opacity: 1;
      right: 15px;
    }
  }
}
</style>